var solicitud;

$(document).ready(function($) {
    // Selector de fecha y hora
    $('#fechaSolicitud').datetimepicker({
        controlType: 'select',
        dateFormat: 'dd/mm/yy',
        timeFormat: 'hh:mm:ss tt',
        currentText: 'Ahora',
        closeText: 'Listo',
        timeText: '',
        hourText: 'Hora',
        minuteText: 'Minuto',
        dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
        monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic']
    });
    // Valor Default
    var actual = new Date();
    actual.setMinutes(actual.getMinutes() + 10); // Suma 10 minutos    

    var value = $.format.date(actual, "dd/MM/yyyy hh:mm:ss") + " " + (actual.getHours() < 12 ? 'am' : 'pm');
    $('#fechaSolicitud').val(value);

    // Enlaza datos
    ko.applyBindings(new EmpresasViewModel());

    // Inicializa objeto
    solicitud = new Object();

    // Inicializa mapa
    inicializarMapas();

    // Inicializa jwizard
    $("#jWizard").jWizard({
        menuEnable: true,
        effects: {
            enable: true
        },
        buttons: {
            cancelHide: true,
            previousText: "Anterior",
            nextText: "Siguiente",
            finishText: "Terminar"
        },
        counter: {
            enable: true,
            type: "count",
            ofText: "de",
            appendText: "Completo"
        },
        events: {
            onFinish: function(event) {
                leerDatosSolicitud();

                var json = JSON.stringify(solicitud);
                $.post('AgregaEditaSolicitud', json,
                    function(data) {
                        var obj = $.parseJSON(data);
                    //alert(obj);
                    }).error(
                    function(data) {
                    //alert("ERROR: " + data.responseText);
                    });
                location.href = "index.jsp";
            },
            onChange: function(event) {
                var id_mapa, altoWizard;

                // Agranda el contenedor para el Mapa
                if (event.stepIndex === 1 || event.stepIndex === 2) {
                    altoWizard = 35;

                    if (event.stepIndex === 1) {
                        id_mapa = "#map_canvas_A";
                    } else {
                        id_mapa = "#map_canvas_B";
                    }

                    // Contenedor
                    $(".jw-steps-wrap").animate({
                        height: altoWizard + "em"
                        }, 500);

                    // Scroll abajo
                    $('html,body').animate({
                        scrollTop: $("#jWizard").offset().top + 10
                    }, 500);

                    // Mapa
                    $(id_mapa).animate({
                        height: (altoWizard - 5) + "em"
                        }, 500, function() {
                        var map_canvas = $(id_mapa)[0];

                        google.maps.event.trigger(map_canvas, 'resize');
                        if (map_canvas.esMapa === undefined) {
                            centrarMapaEnActual(map_canvas);
                        }
                    });

                }
                // Lee los datos en el paso final
                else if (event.stepIndex === event.stepCount - 1) {
                    leerDatosSolicitud();
                }
                // Hace el contenedor mas pequeño
                else {
                    altoWizard = 17;

                    // Scroll Arriba
                    $('html,body').animate({
                        scrollTop: 0
                    }, 250, function() {
                        $(".jw-steps-wrap").animate({
                            height: altoWizard + "em"
                            }, 500);
                    });
                }
            }
        }
    });
});

function inicializarMapas() {
    directionsService = new google.maps.DirectionsService();
}

function centrarMapaEnActual(map_canvas) {
    navigator.geolocation.getCurrentPosition(function(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        centrarMapaEnPosicion(map_canvas, latitude, longitude);
    });
}

function centrarMapaEnPosicion(map_canvas, latitude, longitude) {
    // Opciones
    var myOptions = {
        zoom: 14,
        center: new google.maps.LatLng(latitude, longitude),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // Mapa
    map = new google.maps.Map(map_canvas, myOptions);

    // Parametros extras
    map_canvas.esMapa = true;
    map_canvas.valorPosicion = latitude + "," + longitude;

    // Creacion del marcador
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(latitude, longitude),
        clickable: true,
        draggable: true,
        map: map
    });

    google.maps.event.addListener(marker, 'dragend', function() {
        var position = marker.getPosition();
        map_canvas.valorPosicion = position.$a + "," + position.ab;
    });

    directionsDisplay = new google.maps.DirectionsRenderer({
        'map': map
    });
}

function leerDatosSolicitud() {
    var origen = map_canvas_A.valorPosicion;
    var destino = map_canvas_B.valorPosicion;
    var idEmpresa = $('#cmbEmpresasSolicita').val();
    var nomEmpresa = $('#cmbEmpresasSolicita option:selected').text();
    var fecha = $("#fechaSolicitud").val();
    var precio = 0;

    // Asigna datos                
    solicitud.origen = origen;
    solicitud.destino = destino;
    solicitud.empresa = {
        id: idEmpresa
    };
    solicitud.precio = precio;
    solicitud.fecha = new Object();

    var dia = fecha.substring(0, 2);
    var mes = fecha.substring(3, 5);
    var anho = fecha.substring(6, 10);
    var hora = fecha.substring(11, 13);
    var minuto = fecha.substring(14, 16);
    var segundo = fecha.substring(17, 19);
    solicitud.fecha.year = anho * 1;
    solicitud.fecha.month = mes - 1;
    solicitud.fecha.dayOfMonth = dia * 1;
    solicitud.fecha.hourOfDay = hora * 1;
    solicitud.fecha.minute = minuto * 1;
    solicitud.fecha.second = segundo * 1;

    $("#txtOrigen").text(origen);
    $("#txtDestino").text(destino);
    $("#txtEmpresa").text(nomEmpresa);
    $("#txtPrecio").text("calculando...");
    $("#txtFecha").text(fecha);

    calculaPrecio(12, 10.57);
}

function calculaPrecio(kmLt, valorLitro) {
    if (solicitud.origen !== undefined && solicitud.destino !== undefined) {
        var directionsService = new google.maps.DirectionsService();

        var myOptions = {
            zoom: 7,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var request = {
            origin: solicitud.origen,
            destination: solicitud.destino,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };

        directionsService.route(request, function(response, status) {
            if (status === google.maps.DirectionsStatus.OK) {                
                var distance = response.routes[0].legs[0].distance.value;
                var duration = response.routes[0].legs[0].duration.value;

                // Calculo
                solicitud.precio = (distance / 1000) * valorLitro;

                $("#txtPrecio").text("$" + solicitud.precio);
            }
        });
    }
}

function EmpresasViewModel() {
    var self = this;
    self.empresas = ko.observableArray();
    $.getJSON('ObtenEmpresas?param=solicitar', self.empresas);
}